<template>
  <s-layout>
    <view class="container">
      <view class="form-container">
        <!-- 头部标题 -->
        <view class="header-box">
          <text
            class="cicon-edit"
            style="color: #0052d9; font-size: 44rpx; margin-right: 20rpx"
          ></text>
          <text class="title">完善企业信息</text>
        </view>

        <!-- 基本信息区块 -->
        <view class="form-card">
          <fui-section
            title="基本信息"
            line-width="3px"
            line-color="#0052d9"
            isLine
            size="34"
            style="
              padding: 0;
              --fui-section-title-color: #1a1a1a;
              margin-bottom: 10rpx; /* Adjusted margin */
            "
          ></fui-section>

          <!-- 企业商标 -->
          <view class="form-item avatar-like-item" @click="chooseAvatar">
            <view class="item-left">
              <text
                class="cicon-moneybag"
                style="color: #0052d9; font-size: 40rpx; margin-right: 20rpx"
              ></text>
              <text style="color: #4f4e4e; font-weight: 530">企业商标：</text>
            </view>
            <view class="avatar-right">
              <image
                v-if="displayLogoUrl"
                class="avatar"
                :src="displayLogoUrl"
                mode="aspectFill"
              ></image>
              <text v-else class="placeholder-text">请上传</text>
              <!-- Arrow Icon like reference -->
              <image
                class="arrow-icon"
                src="@/static/tabs/更多.png"
                mode="scaleToFill"
              />
            </view>
          </view>

          <!-- 机构代码 (不可编辑) -->
          <fui-input
            label="机构代码"
            placeholder="机构代码不可修改"
            v-model="formData.tpc_number"
            required
            :padding="['26rpx', '0rpx']"
            style="--fui-input-label-color: #4f4e4e; --fui-input-color: #999"
          >
            <text
              class="cicon-barcode"
              slot="prefix"
              style="color: #0052d9; font-size: 40rpx; margin-right: 10rpx"
            ></text>
          </fui-input>

          <!-- 企业全称 (不可编辑) -->
          <fui-input
            label="企业全称"
            placeholder="企业全称不可修改"
            v-model="formData.tpc_name"
            required
            :padding="['26rpx', '0rpx']"
            style="--fui-input-label-color: #4f4e4e; --fui-input-color: #999"
          >
            <text
              class="cicon-company"
              slot="prefix"
              style="color: #0052d9; font-size: 40rpx; margin-right: 10rpx"
            ></text>
          </fui-input>

          <!-- 公司法人 -->
          <fui-input
            label="公司法人"
            placeholder="请输入公司法人"
            v-model="formData.tpc_legal_rep"
            required
            :padding="['26rpx', '0rpx']"
            :borderBottom="true"
          >
            <text
              class="cicon-person"
              slot="prefix"
              style="color: #0052d9; font-size: 40rpx; margin-right: 10rpx"
            ></text>
          </fui-input>

          <!-- 企业电话 -->
          <fui-input
            label="企业电话"
            placeholder="企业电话"
            v-model="formData.tpc_phone"
            required
            :padding="['26rpx', '0rpx']"
            :borderBottom="false"
          >
            <text
              class="cicon-phone"
              slot="prefix"
              style="color: #0052d9; font-size: 40rpx; margin-right: 10rpx"
            ></text>
          </fui-input>

          <!-- 注册资本 -->
          <fui-input
            label="注册资本"
            placeholder="请输入注册资本"
            v-model="formData.tpc_registered_capital"
            required
            :padding="['26rpx', '0rpx']"
            style="--fui-input-label-color: #4f4e4e; --fui-input-color: #999"
          >
            <text slot="prefix" style="margin-right: 10rpx">单位：万元</text>
          </fui-input>

          <!-- 注册时间 (不可编辑) -->
          <fui-input
           @click="showTimePicker = true"
            label="注册时间"
            placeholder="请输入注册时间"
            v-model="formData.tpc_foundation_date"
            required
			disabled
            :padding="['26rpx', '0rpx']"
          >
            <text
              class="cicon-time"
              slot="prefix"
              style="color: #0052d9; font-size: 40rpx; margin-right: 10rpx"
            ></text>
            <fui-date-picker
              :show="showTimePicker"
              type="3"
              @change="confirmTime"
              @cancel="showTimePicker = false"
            >
            </fui-date-picker>
          </fui-input>

          <!-- 注册地址 (不可编辑) -->
          <fui-input
            label="注册地址"
            placeholder="请输入注册地址"
            v-model="formData.tpc_reg_adress"
            required
            :padding="['26rpx', '0rpx']"
            style="--fui-input-label-color: #4f4e4e; --fui-input-color: #999"
          >
            <text
              class="cicon-location"
              slot="prefix"
              style="color: #0052d9; font-size: 40rpx; margin-right: 10rpx"
            ></text>
          </fui-input>

          <!-- 状态 (不可编辑) -->
          <fui-input
            label="状态"
            placeholder="状态不可修改"
            :value="formData.tpc_status == 0 ? '正常' : '异常'"
            required
            disabled
            :padding="['26rpx', '0rpx']"
            style="--fui-input-label-color: #4f4e4e; --fui-input-color: #999"
          >
          </fui-input>
        </view>

        <!-- 经营信息区块 -->
        <view class="form-card">
          <fui-section
            title="经营信息"
            line-width="3px"
            line-color="#0052d9"
            isLine
            size="34"
            style="
              padding: 0;
              --fui-section-title-color: #1a1a1a;
              margin-bottom: 10rpx; /* Adjusted margin */
            "
          ></fui-section>

          <!-- 公司类型 -->
          <view class="form-item picker-item" @click="openSelectCategoryF">
            <view class="item-left">
              <text
                class="cicon-input"
                style="color: #0052d9; font-size: 40rpx; margin-right: 20rpx"
              ></text>
              <text style="color: #4f4e4e; font-weight: 530">公司类型:</text>
            </view>
            <view class="picker-right">
              <!-- 显示 Label，提交 Value (假设 options 是 {label, value}) -->
              <text v-if="formData.tpc_type" class="picker-value">{{
                categoryFOptions.find((opt) => opt.value == formData.tpc_type)
                  ?.text || formData.tpc_type
              }}</text>
              <!-- 或者如果 category_id_f 直接存的是 Label -->
              <!-- <text v-if="formData.category_id_f" class="picker-value">{{ formData.category_id_f }}</text> -->
              <text v-else class="placeholder-text">请选择公司类型</text>
              <image
                class="arrow-icon"
                src="@/static/tabs/更多.png"
                mode="scaleToFill"
              />
            </view>
            <fui-picker
              :show="showCategoryF"
              :options="categoryFOptions"
              :layer="1"
              @change="confirmCategoryF"
              @cancel="closeSelectCategoryF"
              btnSize="28"
              linkage
            ></fui-picker>
          </view>

          <!-- 企业规模 -->
          <view class="form-item picker-item" @click="openSelectCompanyScale">
            <view class="item-left">
              <text
                class="cicon-loop"
                style="color: #0052d9; font-size: 40rpx; margin-right: 20rpx"
              ></text>
              <text style="color: #4f4e4e; font-weight: 530">企业规模:</text>
            </view>
            <view class="picker-right">
              <text v-if="formData.tpc_company_scale" class="picker-value">{{
                companyScaleOptions.find(
                  (opt) => opt.value == formData.tpc_company_scale
                )?.text || formData.tpc_company_scale
              }}</text>
              <text v-else class="placeholder-text">请选择企业规模</text>
              <image
                class="arrow-icon"
                src="@/static/tabs/更多.png"
                mode="scaleToFill"
              />
            </view>
            <fui-picker
              :show="showCompanyScale"
              :options="companyScaleOptions"
              @change="confirmCompanyScale"
              @cancel="closeSelectCompanyScale"
              :layer="1"
              linkage
            ></fui-picker>
          </view>

          <!-- 经营类型 -->
          <view class="form-item picker-item" @click="openSelectEconomicType">
            <view class="item-left">
              <text
                class="cicon-tag"
                style="color: #0052d9; font-size: 40rpx; margin-right: 20rpx"
              ></text>
              <text style="color: #4f4e4e; font-weight: 530">经营类型:</text>
            </view>
            <view class="picker-right">
              <text v-if="formData.tpc_economic_type" class="picker-value">{{
                economicTypeOptions.find((opt) => opt.value == formData.tpc_economic_type)?.text || formData.tpc_economic_type
                }}</text>
              <text v-else class="placeholder-text">请选择经营类型</text>
              <image
                class="arrow-icon"
                src="@/static/tabs/更多.png"
                mode="scaleToFill"
              />
            </view>
            <fui-picker
              :show="showEconomicType"
              :options="economicTypeOptions"
              @change="confirmEconomicType"
              @cancel="closeSelectEconomicType"
              :layer="1"
              linkage
            ></fui-picker>
          </view>

          <!-- 经营内容 -->
          <fui-input
            label="经营内容"
            placeholder="请输入经营内容"
            v-model="formData.tpc_operate"
            required
            :padding="['26rpx', '0rpx']"
            :borderBottom="true"
          >
            <text
              class="cicon-list"
              slot="prefix"
              style="color: #0052d9; font-size: 40rpx; margin-right: 10rpx"
            ></text>
          </fui-input>

          <!-- 经营地址 -->
          <fui-input
            label="经营地址"
            placeholder="请输入详细地址"
            v-model="formData.tpc_address"
            required
            :padding="['26rpx', '0rpx']"
            :borderBottom="false"
          >
            <text
              class="cicon-location"
              slot="prefix"
              style="color: #0052d9; font-size: 40rpx; margin-right: 10rpx"
            ></text>
          </fui-input>
        </view>

        <!-- 联系方式区块 -->
        <!-- <view class="form-card">
          <fui-section title="联系方式" line-width="3px" line-color="#0052d9" isLine size="34" style="
              padding: 0;
              --fui-section-title-color: #1a1a1a;
              margin-bottom: 10rpx; /* Adjusted margin */
            "></fui-section>
        </view> -->

        <!-- 提交按钮 -->
        <view class="submit-btn-container">
          <view class="submit-btn" @click="submit">
            <text class="btn-text">提交修改</text>
          </view>
        </view>
      </view>
    </view>
  </s-layout>
</template>
<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";
import sheep from "@/sheep";
import other from "@/sheep/api/other";

// Default logo placeholder path - adjust if needed
const DEFAULT_LOGO_PATH = "/static/img/default_logo.png"; // Create this image or use another placeholder

// --- State ---
const formData = ref<Record<string, any>>({
  // Use Record<string, any> for flexibility
  // Stores the *original* or *current saved* server image URL
});
const showTimePicker = ref(false);
const confirmTime = (e: any) => {
  formData.value.tpc_foundation_date = e.result;
  showTimePicker.value = false;
};

// Holds the URL to display (can be existing URL or temporary local path)
const displayLogoUrl = ref("");
// Holds the *new* logo path returned from the server after upload
const newLogoServerPath = ref<string | null>(null);
const economicTypeOptions = ref([]); // 经营类型选项
const categoryFOptions = ref([]); // 所属行业选项
const companyScaleOptions = ref([]); // 企业规模选项
const types = ref([
  { label: "住宅", value: "住宅" },
  { label: "客运车站、码头、机场", value: "客运车站、码头、机场" },
  {
    label:
      "商场（市场）、宾馆（饭店）、体育场（馆）、会堂、公共娱乐场所等公众聚集场所",
    value:
      "商场（市场）、宾馆（饭店）、体育场（馆）、会堂、公共娱乐场所等公众聚集场所",
  },
  {
    label: "医院、养老院、学校、托儿所、幼儿园",
    value: "医院、养老院、学校、托儿所、幼儿园",
  },
  { label: "国家机关单位", value: "国家机关单位" },
  {
    label: "公共图书馆、展览馆、博物馆、档案馆、文物保护单位",
    value: "公共图书馆、展览馆、博物馆、档案馆、文物保护单位",
  },
  // Add more types if needed
]);

const showCategoryF = ref(false);
const showCategoryC = ref(false);
const showCompanyScale = ref(false);
const showEconomicType = ref(false);
// --- Lifecycle Hooks ---
onLoad(async (options) => {

  // 先加载选项数据，再获取企业详情
  await loadPickerOptions();
  
  console.log("CompanyEdit onLoad options:", options);
  const companyId = options?.id;
  console.log("Company ID from options:", companyId);

  if (companyId) {
    await qyDetail(companyId);
  } else {
    console.error("Missing companyId in options");
    uni.showToast({ title: "无法加载企业信息", icon: "none" });
    // Optionally navigate back
    // uni.navigateBack();
  }
});

// --- Methods ---

// Fetch Company Details
const qyDetail = async (id: string | number) => {
  uni.showLoading({ title: "加载中..." });

  try {
    const params = { third_company_id: id };
    const res = await other.getThirdPartyCompanyInfo(params); // 使用 other.detail 接口
    if (res.code === 200 && res) {
      // 更新表单数据
      Object.assign(formData.value, res.third_company_Info);
      
      // 设置商标显示
      displayLogoUrl.value =
        res.third_company_Info.tpc_image || DEFAULT_LOGO_PATH;
      formData.value.tpc_image = res.third_company_Info.tpc_image || "";
      
      // 确保tpc_type、tpc_company_scale和tpc_economic_type使用的是value而不是text
      // 如果加载了选项数据，则查找并设置正确的value值
      if (categoryFOptions.value.length > 0) {
        const typeOption = categoryFOptions.value.find(
          (opt) => opt.text === formData.value.tpc_type
        );
        if (typeOption) {
          formData.value.tpc_type = typeOption.value;
        }
      }
      
      if (companyScaleOptions.value.length > 0) {
        const scaleOption = companyScaleOptions.value.find(
          (opt) => opt.text === formData.value.tpc_company_scale
        );
        if (scaleOption) {
          formData.value.tpc_company_scale = scaleOption.value;
        }
      }
      
      if (economicTypeOptions.value.length > 0) {
        const economicOption = economicTypeOptions.value.find(
          (opt) => opt.text === formData.value.tpc_economic_type
        );
        if (economicOption) {
          formData.value.tpc_economic_type = economicOption.value;
        }
      }
    } else {
      console.error("获取企业详情失败:", res.msg || "未知错误");
      uni.showToast({ title: res.msg || "加载企业信息失败", icon: "none" });
    }
  } catch (error) {
    console.error("Error fetching company details:", error);
    uni.showToast({ title: "加载数据出错", icon: "none" });
  } finally {
    uni.hideLoading();
  }
};

// Category Picker Methods
const openSelectCategoryC = () => {
  showCategoryC.value = true;
};
const openSelectCategoryF = () => {
  showCategoryF.value = true;
};
const closeSelectCategoryC = () => {
  showCategoryC.value = false;
};
const closeSelectCategoryF = () => {
  showCategoryF.value = false;
};

const confrimcategoryC = (e: { value: string }) => {
  formData.value.category_id_c = e.value;
  closeSelectCategoryC();
};

const confrimcategoryF = (e: { value: string }) => {
  formData.value.category_id_f = e.value;
  closeSelectCategoryF();
};

// --- Form Submission ---
const submit = async () => {
  // Basic Validation (Add more as needed)
  if (!formData.value.tpc_name) {
    return uni.showToast({ title: "请输入企业全称", icon: "none" });
  }
  if (!formData.value.tpc_number) {
    return uni.showToast({ title: "请输入机构代码", icon: "none" });
  }
  if (!formData.value.tpc_company_scale) {
    return uni.showToast({ title: "请输入企业规模", icon: "none" });
  }
  if (!formData.value.tpc_operate) {
    return uni.showToast({ title: "请输入经营内容", icon: "none" });
  }
  if (!formData.value.tpc_address) {
    return uni.showToast({ title: "请输入经营地址", icon: "none" });
  }
  if (!formData.value.tpc_legal_rep) {
    return uni.showToast({ title: "请输入公司法人", icon: "none" });
  }
  if (!formData.value.tpc_phone) {
    return uni.showToast({ title: "请输入企业电话", icon: "none" });
  }

  // 确保提交的是value值而不是text值
  // 检查tpc_type
  if (formData.value.tpc_type && categoryFOptions.value.length > 0) {
    const typeOption = categoryFOptions.value.find(opt => opt.text === formData.value.tpc_type);
    if (typeOption) {
      formData.value.tpc_type = typeOption.value;
    }
  }
  
  // 检查tpc_company_scale
  if (formData.value.tpc_company_scale && companyScaleOptions.value.length > 0) {
    const scaleOption = companyScaleOptions.value.find(opt => opt.text === formData.value.tpc_company_scale);
    if (scaleOption) {
      formData.value.tpc_company_scale = scaleOption.value;
    }
  }
  
  // 检查tpc_economic_type
  if (formData.value.tpc_economic_type && economicTypeOptions.value.length > 0) {
    const economicOption = economicTypeOptions.value.find(opt => opt.text === formData.value.tpc_economic_type);
    if (economicOption) {
      formData.value.tpc_economic_type = economicOption.value;
    }
  }

  uni.showLoading({ title: "正在提交...", mask: true });

  try {
    formData.value.tpc_image = formData.value.tpc_image.replace(
      /^https?:\/\/[^\/]+/,
      ""
    );
    formData.value.third_company_id = formData.value.tpc_id; // 确保 ID 正确传递
    console.log("Submitting payload:", formData.value);

    const response = await other.getThirdPartyCompanyEditForm(formData.value);

    uni.hideLoading();

    if (response.code === 200) {
      uni.showToast({
        title: response.msg || "修改成功",
        icon: "success",
        duration: 1500,
      });

      setTimeout(() => {
        const companyId = formData.value.tpc_id || formData.value.third_company_id;

        // 发送刷新事件，通知上一页刷新数据
        uni.$emit('refreshCompanyDetail', { companyId: companyId });
        
        // 发送统一的数据更新事件，用于无感刷新
        uni.$emit('otherCompanyDataUpdated', {
          timestamp: Date.now(),
          action: 'update',
          moduleType: 'otherCompany',
          companyId: companyId
        });

        // 返回上一页
        uni.navigateBack({
          delta: 1
        });
      }, 1500);
    } else {
      uni.showToast({
        title: response.msg || "提交失败，请重试",
        icon: "none",
        duration: 2000,
      });
    }
  } catch (error) {
    uni.hideLoading();
    console.error("Submit error:", error);
    uni.showToast({
      title: "网络错误或服务异常",
      icon: "none",
      duration: 2000,
    });
  }
};
// 加载选择器选项
const loadPickerOptions = async () => {
  try {
    const res = await other.getThirdCompanyEdit();
    if (res.code === 200) {
      categoryFOptions.value = res.company_type || [];
      companyScaleOptions.value = res.company_scale || [];
      economicTypeOptions.value = res.economic_type || [];
    }
  } catch (error) {
    console.error("加载选择器选项失败:", error);
    uni.showToast({ title: "加载选项失败", icon: "none" });
  }
};

const confirmCategoryF = (e) => {
  console.log("confirmCategoryF", e);
  console.log("Selected category:", formData.value);
  formData.value.tpc_type = e.value;
  closeSelectCategoryF();
};

const openSelectCompanyScale = () => {
  showCompanyScale.value = true;
};
const closeSelectCompanyScale = () => {
  showCompanyScale.value = false;
};
const confirmCompanyScale = (e: { value: string }) => {
  console.log("Selected company scale:", e.value);

  formData.value.tpc_company_scale = e.value;
  closeSelectCompanyScale();
};

const openSelectEconomicType = () => {
  showEconomicType.value = true;
};
const closeSelectEconomicType = () => {
  showEconomicType.value = false;
};
const confirmEconomicType = (e: { value: string }) => {
  formData.value.tpc_economic_type = e.value;
  closeSelectEconomicType();
};

// Choose and Upload Logo (Adapted from reference)
const chooseAvatar = async () => {
  try {
    const chooseRes = await uni.chooseImage({
      count: 1,
      sizeType: ["compressed"],
      sourceType: ["album", "camera"], // Allow camera
    });

    const tempFilePath = chooseRes.tempFilePaths[0];
    displayLogoUrl.value = tempFilePath; // Show preview immediately
    newLogoServerPath.value = null; // Reset server path until upload succeeds

    uni.showLoading({ title: "上传商标中..." });

    // --- IMPORTANT: Replace with your actual upload endpoint and host ---
    const upLoadrUrl =
      "https://assess.yuejin-tech.com/app_api.php?t=upload&op=image_upload&role=third_party&type=company_info"; // Placeholder URL from reference
    const hostUrl = "https://assess.yuejin-tech.com"; // Placeholder Host from reference
    // ---

    const token = sheep.$store("user").getToken
      ? sheep.$store("user").getToken()
      : null;
    const headers: Record<string, any> = {};
    if (token) {
      // Adjust header name if needed (e.g., 'X-Token', 'Authorization': 'Bearer ' + token)
      headers["Authorization"] = "Bearer " + token;
    }

    uni.uploadFile({
      url: upLoadrUrl,
      filePath: tempFilePath,
      name: "file", // The name expected by your backend API for the file field
      header: headers,
      success: (uploadFileRes) => {
        console.log("Upload success raw response:", uploadFileRes);
        try {
          // Remove BOM if present before parsing
          const responseData = JSON.parse(
            uploadFileRes.data.replace(/^\uFEFF/, "") || "{}"
          );
          console.log("Parsed server response:", responseData);

          if (responseData.data) {
            // Assuming 'data' contains the relative path
            const relativePath = responseData.data;
            const serverUrl = relativePath; // Construct full URL
            console.log("上传成功，服务器URL:", serverUrl);
            newLogoServerPath.value = serverUrl; // Store the *new* server URL
            formData.value.tpc_image = serverUrl.replace(
              /^https?:\/\/[^\/]+/,
              ""
            );
            uni.hideLoading();
            uni.showToast({
              title: "商标上传成功",
              icon: "success",
              duration: 1500,
            });
          } else {
            const errorMessage =
              responseData.msg || responseData.message || "商标上传失败";
            console.error(
              "商标上传失败 (API Error):",
              errorMessage,
              responseData
            );
            uni.hideLoading();
            uni.showToast({ title: errorMessage, icon: "none" });
            // Revert display URL to the original one on failure
            displayLogoUrl.value = formData.value.image || DEFAULT_LOGO_PATH;
            newLogoServerPath.value = null;
          }
        } catch (parseError) {
          console.error("解析服务器响应失败:", parseError, uploadFileRes.data);
          uni.hideLoading();
          uni.showToast({ title: "处理服务器响应失败", icon: "none" });
          displayLogoUrl.value = formData.value.image || DEFAULT_LOGO_PATH;
          newLogoServerPath.value = null;
        }
      },
      fail: (err) => {
        console.error("商标上传失败 (uni.uploadFile):", err);
        uni.hideLoading();
        uni.showToast({ title: "商标上传网络错误", icon: "none" });
        displayLogoUrl.value = formData.value.image || DEFAULT_LOGO_PATH;
        newLogoServerPath.value = null;
      },
    });
  } catch (chooseError: any) {
    // Handle cancellation gracefully
    if (chooseError.errMsg && chooseError.errMsg.includes("cancel")) {
      console.log("用户取消选择商标");
    } else {
      console.error("选择商标时发生错误:", chooseError);
      uni.showToast({ title: "选择图片失败", icon: "none" });
    }
    uni.hideLoading(); // Ensure loading is hidden if chooseImage fails
  }
};
</script>

<style lang="scss" scoped>
/* Import icon fonts if not globally available */
/* @import "/src/sheep/scss/icon/_cicon.scss"; */
/* Example path */

.container {
  padding: 20rpx 30rpx 120rpx 30rpx;
  /* Keep bottom padding for fixed button */
  background: #f8f9fa;
  min-height: 100vh;
  /* Ensure background covers full height */
  box-sizing: border-box;
}

.header-box {
  display: flex;
  align-items: center;
  padding: 30rpx 0;

  .title {
    font-size: 40rpx;
    font-weight: 700;
    color: #1a1a1a;
  }
}

/* General Form Card Style */
.form-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 10rpx 20rpx 0 20rpx;
  /* Adjust padding */
  font-size: 32rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 82, 217, 0.05);
  /* Softer shadow */

  // Consistent styling for fui-input within cards
  ::v-deep .fui-input__wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    // align-items: center; /* Vertically center label and input */
  }

  ::v-deep .fui-input__label {
    color: #4f4e4e !important;
    font-weight: 530 !important;
    width: 180rpx !important;
    /* Fixed width for labels */
    margin-right: 0 !important;
    /* Remove default margin */
    flex-shrink: 0;
    /* Prevent label from shrinking */
  }

  ::v-deep .fui-input__padding {
    padding: 26rpx 0 !important; // Consistent internal padding
  }

  ::v-deep .fui-input__input {
    text-align: right; // Align input text to the right
    color: #1a1a1a;
    font-weight: normal;
  }

  // Style placeholder text if needed
  ::v-deep .fui-input__placeholder,
  ::v-deep .fui-input__input[placeholder-style] {
    text-align: right !important;
    color: #999 !important;
    font-weight: normal;
  }

  // Ensure borders are consistent or controlled by props
  ::v-deep .fui-input__border-bottom::after,
  ::v-deep .fui-input__border-top::after {
    left: 0 !important; // Make border full width
    right: 0 !important;
  }
}

/* Specific Item Styles */
.form-item {
  display: flex;
  justify-content: space-between; // Push content to ends
  align-items: center;
  padding: 26rpx 0; // Match fui-input padding
  font-size: 32rpx;
  border-bottom: 1rpx solid #eee;
}

/* Style for Logo item to resemble reference avatar item */
.avatar-like-item {
  border-bottom: 1rpx solid #eee; // Add border like other items

  .item-left {
    display: flex;
    align-items: center;
  }

  .avatar-right {
    display: flex;
    align-items: center;
  }

  .avatar {
    width: 80rpx; // Slightly larger logo
    height: 80rpx;
    border-radius: 8rpx; // Square or slightly rounded for logos
    border: 1px solid #eee;
    margin-right: 15rpx;
    background-color: #f0f0f0; // Placeholder background
  }

  .arrow-icon {
    width: 25rpx;
    height: 25rpx;
    opacity: 0.6;
  }

  .placeholder-text {
    color: #999;
    font-size: 30rpx;
    margin-right: 15rpx; // Space before arrow
  }
}

/* Style for Picker items */
.picker-item {
  border-bottom: 1rpx solid #eee;

  .item-left {
    display: flex;
    align-items: center;
    color: #4f4e4e;
    font-weight: 530;
  }

  .picker-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-grow: 1; // Take remaining space
    text-align: right;
    margin-left: 20rpx; // Space between label and value
  }

  .picker-value {
    color: #1a1a1a;
    margin-right: 15rpx;
    // Ellipsis for long text if needed
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
  }

  .placeholder-text {
    color: #999;
    font-size: 30rpx;
    margin-right: 15rpx;
  }

  .arrow-icon {
    width: 25rpx;
    height: 25rpx;
    opacity: 0.6;
    flex-shrink: 0; // Prevent arrow from shrinking
  }

  // Hide the fui-input within the picker item visually
  // (It's just used to trigger the picker via v-model linkage in original code,
  // but we trigger via container click now, so it's not needed)
  // If you were using fui-input *for display* you'd style it here.
}

/* Submit Button Styling (Fixed at bottom) - Copied from reference */
.submit-btn-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom));
  background-color: #f8f9fa; // Match page background
  z-index: 10;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.submit-btn {
  background: linear-gradient(135deg, #0052d9, #2979ff);
  border-radius: 50rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 16rpx rgba(0, 82, 217, 0.3);
  transition: background 0.3s ease;

  &:active {
    background: linear-gradient(
      135deg,
      darken(#0052d9, 5%),
      darken(#2979ff, 5%)
    );
  }

  .btn-text {
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
  }
}
</style>
